<!-- 饼图 -->
<template>
	<el-card>
		<template #header> 产品分类饼图 </template>
		<div :id="id" :class="className" :style="{ height, width }"></div>
	</el-card>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'

const props = defineProps({
	id: {
		type: String,
		default: 'pieChart'
	},
	className: {
		type: String,
		default: ''
	},
	width: {
		type: String,
		default: '200px',
		required: true
	},
	height: {
		type: String,
		default: '200px',
		required: true
	}
})
const options = {
	grid: {
		left: '2%',
		right: '2%',
		bottom: '10%',
		containLabel: true
	},
	legend: {
		top: 'bottom',
		textStyle: {
			color: '#999'
		}
	},
	series: [
		{
			name: 'Nightingale Chart',
			type: 'pie',
			radius: [50, 130],
			center: ['50%', '50%'],
			roseType: 'area',
			itemStyle: {
				borderRadius: 1,
				color: function (params: any) {
					//自定义颜色
					const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C']
					return colorList[params.dataIndex]
				}
			},
			data: [
				{ value: 26, name: '家用电器' },
				{ value: 27, name: '户外运动' },
				{ value: 24, name: '汽车用品' },
				{ value: 23, name: '手机数码' }
			]
		}
	]
}

const chart = ref<any>('')

onMounted(() => {
	chart.value = markRaw(
		echarts.init(document.getElementById(props.id) as HTMLDivElement)
	)

	chart.value.setOption(options)

	window.addEventListener('resize', () => {
		chart.value.resize()
	})
})

onActivated(() => {
	if (chart.value) {
		chart.value.resize()
	}
})
</script>
